<!-- 分诊动态 -->
<template>
  <div class="main-content-container box">
    <el-row type="flex" justify="space-between" class="mt10">
      <el-col :span="3" />
      <el-col class="buttons box-r">
        <el-button class="add-button" @click="addTriageBtn">+增加分诊</el-button>
        <el-button class="add-button" @click="addCustomersBtn">+增加顾客</el-button>
      </el-col>
    </el-row>
    <div class="box-display">
      <div class="outcircle">
        <div class="title-display">今日分诊概况</div>
        <div class="circle">
          <span>
            {{ showTotal.triageCount?showTotal.triageCount:0 }}
            <i class="el-icon-top" />
          </span>
          <span>共分诊</span>
        </div>
        <div class="circle">
          <span>
            {{ showTotal.waitTriage?showTotal.waitTriage:0 }}
            <i class="el-icon-bottom" />
          </span>
          <span>等待分诊</span>
        </div>
        <div class="circle">
          <span>{{ showTotal.haveTriage?showTotal.haveTriage:0 }}</span>
          <span>已分诊</span>
        </div>
        <div class="circle">
          <span>{{ showTotal.averageWaitTime?showTotal.averageWaitTime:0 }}</span>
          <span>平均等待时间</span>
        </div>
      </div>
    </div>
    <!-- <el-row type="flex" class="rows">
      <el-col :span="3">
        <p>共分诊</p>
        <p>{{ showTotal.triageCount?showTotal.triageCount:0 }}</p>
      </el-col>
      <el-col :span="3" :offset="1">
        <p>等待分诊</p>
        <p>{{ showTotal.waitTriage?showTotal.waitTriage:0 }}</p>
      </el-col>
      <el-col :span="3" :offset="1">
        <p>已分诊</p>
        <p>{{ showTotal.haveTriage?showTotal.haveTriage:0 }}</p>
      </el-col>
      <el-col :span="3" :offset="1">
        <p>平均等待时间</p>
        <p>{{ showTotal.averageWaitTime?showTotal.averageWaitTime:0 }}分钟</p>
      </el-col>
    </el-row> -->
    <div class="guard">
      <p>今日有{{ showAdviserList.length }}位咨询师在岗</p>
      <el-row v-for="(item,index) in showAdviserList" :key="index" type="flex">
        <el-col :span="2">{{ item.name }} </el-col>
        <el-col :span="8">
          <!-- 8*3 一份占3 3*3=9 5*3=15-->
          <el-row class="pouts">
            <el-col :span="item.waiting*count">等待中{{ item.waiting }}人</el-col>
            <el-col :span="item.haveReceive*count">已接待{{ item.haveReceive }}人</el-col>
          </el-row>
        </el-col>
        <el-col :span="4" :offset="1">当前接待 {{ item.customerName }}</el-col>
        <el-col :span="4">下一位 {{ item.nextCustomerName }}</el-col>
        <el-col :span="4">平均等待时间 {{ item.averageWaiting?item.averageWaiting:0 }}分钟</el-col>
      </el-row>
    </div>
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <p style="margin:0">今日预约的顾客</p>
        </el-col>
        <el-col :span="1">
          <el-button type="text">更多<i class="el-icon-d-arrow-right" /></el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <div class="box-show">
        <el-table v-loading="loading" :data="manyManCustomerList" border :row-class-name="tableColor" height="300">
          <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="性别" prop="sex" :show-overflow-tooltip="true" />
          <el-table-column label="分诊类型" prop="treatType" :show-overflow-tooltip="true" />
          <el-table-column label="项目分类/项目" prop="projectName" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="排台方式" prop="arrangeType" :show-overflow-tooltip="true" />
          <el-table-column label="咨询师" prop="adviserName" :show-overflow-tooltip="true" />
          <el-table-column label="主治医生" prop="faceDoctorName" :show-overflow-tooltip="true" />
          <el-table-column label="分诊时间" :show-overflow-tooltip="true" min-width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.triageTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分诊人" prop="accepterName" :show-overflow-tooltip="true" />
          <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
          <el-table-column label="前面人数" prop="waitMan" :show-overflow-tooltip="true" />
          <el-table-column label="已等时间" prop="waitTime" :show-overflow-tooltip="true" />
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="reassignmentBtn(scope.row)">改派</el-button>
              <el-button type="text" @click="cancelBtn(scope.row,false)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <p>等待中的顾客</p>
        </el-col>
        <el-col :span="1">
          <el-button type="text">更多<i class="el-icon-d-arrow-right" /></el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <div class="box-show">
        <el-table v-loading="loading" :data="waitLongCustomerList" border :row-class-name="tableColor" height="300">
          <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="性别" prop="sex" :show-overflow-tooltip="true" />
          <el-table-column label="分诊类型" prop="treatType" :show-overflow-tooltip="true" />
          <el-table-column label="项目分类/项目" prop="intentCaseName" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column label="排台方式" prop="arrangeType" :show-overflow-tooltip="true" />
          <el-table-column label="咨询师" prop="adviserName" :show-overflow-tooltip="true" />
          <el-table-column label="主治医生" prop="faceDoctorName" :show-overflow-tooltip="true" />
          <el-table-column label="分诊时间" :show-overflow-tooltip="true" min-width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.triageTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分诊人" prop="accepterName" :show-overflow-tooltip="true" />
          <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
          <el-table-column label="前面人数" prop="waitMan" :show-overflow-tooltip="true" />
          <el-table-column label="已等时间" prop="waitTime" :show-overflow-tooltip="true" />
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="reassignmentBtn(scope.row)">改派</el-button>
              <el-button type="text" @click="cancelBtn(scope.row,true)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <p>刚刚接待完的顾客</p>
        </el-col>
        <el-col :span="1">
          <el-button type="text">更多<i class="el-icon-d-arrow-right" /></el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <div class="box-show">
        <el-table v-loading="loading" :data="receivedCustomerList" border :row-class-name="tableColor" height="300">
          <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
          <el-table-column label="性别" prop="sex" :show-overflow-tooltip="true" />
          <el-table-column label="分诊类型" prop="treatType" :show-overflow-tooltip="true" />
          <el-table-column label="项目分类/项目" prop="intentCaseName" min-width="120" />
          <el-table-column label="排台方式" prop="arrangeType" :show-overflow-tooltip="true" />
          <el-table-column label="咨询师" prop="adviserName" :show-overflow-tooltip="true" />
          <el-table-column label="主治医生" prop="faceDoctorName" :show-overflow-tooltip="true" />
          <el-table-column label="分诊时间" :show-overflow-tooltip="true" min-width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.triageTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="分诊人" prop="accepterName" :show-overflow-tooltip="true" />
          <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
          <el-table-column label="接待时间" prop="receiveTime" :show-overflow-tooltip="true" min-width="120" />
          <el-table-column label="咨询结果" prop="result" :show-overflow-tooltip="true" />
        </el-table>
      </div>
    </div>
    <Triage ref="subscribeRef" :title.sync="title" :visible.sync="triageVisible" :flag="false" @success="getTriageList()" />
    <Customer :title="title" :text-btn="textBtn" :visible.sync="customerVisible" :flag="true" :is-info="true" :is-modify="true" @handleClose="handleClose" />
  </div>
</template>

<script>
import { tableColor } from '@/utils/common.js';
import Triage from "../management/dialog";
import Customer from "../../../customer/customers/dialog";
export default {
  components: {
    Triage,
    Customer,
  },
  data() {
    return {
      tableColor,
      showTotal: {},
      showAdviserList: [],
      receivedCustomerList: [],
      waitLongCustomerList: [],
      manyManCustomerList: [],
      count: null,
      title: '',
      textBtn: '',
      triageVisible: false,
      customerVisible: false,
      loading: false,
    };
  },
  created() {
    this.getShowTotalData();
    this.getshowAdviserData();
    this.getreceivedCustomerList();
    this.getwaitLongCustomerList();
    this.getmanyManCustomerList();
    // 1min刷新一下
    this.timer = setInterval(() => {
      this.getwaitLongCustomerList();
      this.getmanyManCustomerList();
    }, 1000 * 60);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    async getShowTotalData() {
      const res = await this.$api['reception/triage/showTotal']();
      if (res.code !== 200) return this.$message.error('获取分诊概况数据失败！');
      this.showTotal = res.data;
    },
    async getshowAdviserData() {
      const res = await this.$api['reception/triage/showAdviser']();
      if (res.code !== 200) return this.$message.error(res.msg);
      // Math.max.apply(Math, array.map(function (o) { return o.value; }));
      const maxCount = Math.max.apply(Math, res.data.map(item => {
        // item.waiting = 100;
        // item.haveReceive = 300;
        item.count = item.waiting + item.haveReceive;
        return item.count;
      })
      );
      if (maxCount > 0) {
        this.count = Math.ceil(24 / maxCount);
      } else {
        this.count = 0;
      }
      // console.log(maxCount, '人数之和最大值');
      // console.log(this.count, '每份占比');
      this.showAdviserList = res.data;
    },
    async getreceivedCustomerList() {
      this.loading = true;
      const res = await this.$api['reception/triage/receivedCustomerList']();
      this.loading = false;
      if (res.code !== 200) return this.$message.error('获取刚接待顾客数据失败！');
      this.receivedCustomerList = res.data.result;
    },
    async getwaitLongCustomerList() {
      this.loading = true;
      const res = await this.$api['reception/triage/waitLongCustomerList']();
      this.loading = false;
      if (res.code !== 200) return this.$message.error('获取等待时间久的顾客数据失败！');
      this.waitLongCustomerList = res.data.result;
    },
    async getmanyManCustomerList() {
      this.loading = true;
      const res = await this.$api['reception/triage/manyManCustomerList']();
      this.loading = false;
      if (res.code !== 200) return this.$message.error('获取前面人数多的顾客数据失败！');
      this.manyManCustomerList = res.data;
    },
    // 增加分诊
    addTriageBtn() {
      this.reassignmentBtn();
    },
    //  增加顾客
    addCustomersBtn() {
      this.title = "新增顾客";
      this.textBtn = "保存";
      this.customerVisible = true;
      // this.$router.push({
      //   path: '/swan/customer/customers',
      //   query: {
      //     isPopup: true,
      //   },
      // });
    },
    // 改派
    reassignmentBtn(row) {
      this.title = "增加分诊";
      this.triageVisible = true;
      this.$refs.subscribeRef.addTriageBtn();
      // this.$router.push({
      //   path: '/swan/reception/triage/management',
      //   query: {
      //     isPopup: true,
      //     row: row,
      //   },
      // });
    },
    // 取消
    async cancelBtn(row, flag) {
      const confirmResult = await this.$confirm('请确认是否取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已撤回取消操作！');
      }
      const res = await this.$api['reception/triage/cancel']({ id: row.id });
      if (res.code !== 200) return this.$message.error('取消失败！');
      if (flag) {
        this.getwaitLongCustomerList();
      } else {
        this.getmanyManCustomerList();
      }
    },
    getTriageList() {
      this.getreceivedCustomerList();
      this.getwaitLongCustomerList();
      this.getmanyManCustomerList();
    },
    handleClose() {
      this.customerVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 15px;
  .rows {
    .el-col {
      // padding-top: 12px;
      height: 120px;
      text-align: center;
      border: 1px solid #aaa;
      background-color: #fff;
      :nth-child(2) {
        font-size: 28px;
      }
    }
  }
  .guard > .el-row > .el-col {
    margin: 10px;
    // text-align: center;
  }
  .guard {
    line-height: 25px;
    .el-col {
      font-size: 14px;
    }
    .pouts {
      .el-col {
        height: 25px;
        // line-height: 25px;
        font-size: 14px;
        text-align: center;
        border: 1px solid #ccc;
      }
      :nth-child(2) {
        background-color: #ccc;
      }
    }
  }
}
.outcircle{
  display: flex;
  height: 300px;
  box-shadow: 2px 0 20px #e3e4f0;
  border-radius: 10px;
  // justify-content: space-between;
  // column-count: center;
  .circle{
    width: 136px;
    text-align: center;
    height: 136px;
    margin: auto;
    border-radius: 100%;
    box-shadow:rgba(0,0,0,.3) 0px 0px 10px;
    span{
      display: block;
      line-height: 30px;
    }
    >:nth-child(1){
      font-size: 28px;
      margin-top: 33%;
    }
  }
}
.el-icon-top{
  color: #f77464;
}
.el-icon-bottom{
  color: #42d073;
}
.el-table thead{
  color: #b9b9b9 !important;
}
.add-button{
  background: #eff3fb;
  color:#0278dc;
  border-color: #eff3fb;
}
.box-display{
  padding: 0 40px;
  margin-top:20px;
}
.title-display{
  font-size: 14px;
  color:#333;
  margin-top: 20px;
  padding-left: 20px;
}

.box-show{
  padding-bottom: 20px;
  // margin-top: 20px;
}
.box-r{
  text-align: right;
}
/deep/.box-display{
  padding: 0px;
  margin-top: 10px;
}
</style>

